<template>
  <div class="price-buy-container">
    <div class="row1">
      <div>
        <IconFont name="dongdong"></IconFont>
        <div style="color: #15181d">单张电影票限价</div>
      </div>
      <div v-if="Price" style="color: #15181d">
        原价<span>￥</span>
        <span style="color: #5232b7">{{ Price.toFixed(2) }}元</span> / 张
      </div>
    </div>
    <nut-divider style="color: #eee" />
    <div class="row2">
      <div
        class="item"
        v-for="(item, index) in rateList"
        :class="{ actived: selected == index }"
        @click="changeSelected(index)"
        :key="item.id"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="row3">
      <div style="color: #5232b7">￥</div>
      <nut-input
        :placeholder="placeholderPrice"
        type="number"
        style="color: #15181d"
        v-model="limited_price"
      />
    </div>
    <div class="row4">*单张限价最终成交价格不会高于此价</div>
  </div>
</template>
<script setup>
import { toRefs, ref, reactive, computed, watch, onMounted } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";

const props = defineProps({
  info: Array,
  arealist: Array,
  Price: Number,
  rateList: Array,
});
const changeTwoDecimal = (x) => {
  let resNum = parseFloat(x);
  // isNaN()，判断一个变量是否为非数字的类型，非数字返回true，数字则返回false
  // console.log('你看=', isNaN(resNum))
  if (isNaN(resNum)) {
    return false;
  }
  resNum = Math.round(resNum * 100) / 100;
  return resNum;
};

const emit = defineEmits(["onLimitPrice"]);
const placeholderPrice = computed(() => {
  return `￥${changeTwoDecimal(
    Price.value * rateList.value[0].zhe
  )} ~ ￥${changeTwoDecimal(Price.value)}`;
});

const { info, arealist, Price, rateList } = toRefs(props);
// const priceList = ref([
//     {
//         id: 1,
//         name: "78折",
//         zhe: 0.78
//     },
//     {
//         id: 2,
//         name: "8折",
//         zhe: 0.8
//     },
//     {
//         id: 3,
//         name: "85折",
//         zhe: 0.85
//     },
//     {
//         id: 4,
//         name: "9折",
//         zhe: 0.9
//     }

// ])
useDidShow(() => {});
const selected = ref(2);
const limited_price = ref(null);
const originPrice = ref(null);
watch(
  Price,
  () => {
    limited_price.value = changeTwoDecimal(rateList.value[2].zhe * Price.value);
    emit("onLimitPrice", limited_price.value);
  },
  { immediate: true }
);
watch(
  limited_price,
  (newVal) => {
    emit("onLimitPrice", limited_price.value);
  },
  { immediate: true }
);
const changeSelected = (e) => {
  selected.value = e;
  limited_price.value = changeTwoDecimal(
    changeTwoDecimal(
      rateList.value[e].zhe * limitedPriceFun(info.value[0].areaId)[0].price
    ) / 100
  );

  // inputLimitPrice
  emit("onLimitPrice", limited_price.value);
};

const limitedPriceFun = (str) => {
  return arealist.value.filter((item) => item.regionName == str);
};
// const originPriceFun = computed(() => {
//     return (areaId) => {
//         const item = arealist.value.find(item => item.areaId === areaId);
//         if (item) {
//             console.log(item.price, "pp");
//             return item.price;
//         }
//         return null; // 或者你可以返回一个默认值
//     }
// })
</script>
<style lang="scss">
.price-buy-container {
  padding: 10px 20px;
  background-color: #fff;
  // border: 2px solid #ccc;
  // border-radius: 10px;

  .row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    padding: 10px;
  }

  .row2 {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item {
      width: 120px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #eee;
      text-align: center;
      font-size: 24px;
      border-radius: 5px;
    }

    .actived {
      background: linear-gradient(to right, #5232b7, #7237bc);
      // color=""
      opacity: 0.8;
      color: #fff;
    }
  }

  .row3 {
    display: flex;
    padding: 10px;
    align-items: center;
    margin-top: 25px;
  }

  .row4 {
    font-size: 22px;
    margin-top: 10px;
    color: #5232b7;
  }
}
</style>
